<template>
  <a-card title="用户访问浏览器占比">
    <div id="broswer_chartId" style="width:100%;height:380px;"></div>
  </a-card>
</template>
<script setup>
import * as echarts from 'echarts';

const handleLoadData = async ()=>{
  const resp = await useStatePlatformDataBroswerApi();
  const dataArr =  resp.data.map(c=>{
    c.value = c.nums
    return c
  })
  return Promise.resolve(dataArr)
}

const handleLoadOrderCharts = (data) => {
  nextTick(() => {

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("broswer_chartId"));
    myChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      type: 'pie',
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      avoidLabelOverlap: false,
      series: [
        {
          name: '浏览器类型',
          type: 'pie',
          radius: ['20%', '60%'],
          center: ['50%', '60%'],
          // adjust the start and end angle
          startAngle: 0,
          endAngle: 360,
          data: data
        }
      ]
    })

    myChart.on('click', function(params) {
      // 控制台打印数据的名称
      console.log(params);
    });

    window.addEventListener('resize', function() {
      myChart.resize();
    });


  })
}

onMounted(() => {
  handleLoadData().then(dataArr=>{
    handleLoadOrderCharts(dataArr)
  })
})

</script>
